<template>
	<u-navbar :leftIconSize='0' titleStyle="font-size:20px;font-weight:600" :fixed='true' :placeholder='true'
		title="历史记录"> </u-navbar>
	<view class="">
		<view class="tab-cell-content">
			<view class="" style="width:100vw;height: 1px; background-color:rgb(237, 237, 237);" />
			<view class="flex-center width-100 white-bg ">
				<view class="cell-title-default" v-for="item,index in tabList" @click="sectionChange(item,index)">
					<view style="margin-top: 14px;" :class="recodeIndex==index?'cell-text-active':''">{{item.label}}
					</view>
					<view style="width: 25px;height: 3px !important;margin-top: 14px;border-radius: 3px;"
						:class="recodeIndex==index?'cell-title-active':''" />
				</view>
			</view>
		</view>
		<view class="" style="max-height:calc(100vh - 159px); overflow-y: scroll;">
			<u-empty :marginTop='180' v-if="recordData.length==0" :iconSize='180' :textSize='20' :text="'暂无数据'" />
			<u-list @scrolltolower="scrolltolower" v-else>
				<u-list-item v-for="item,index in recordData" :key="index" style="">
					<view class="cell-theme-history" style="margin-top: 15px;"
						@click="gotoPage('pages/report/report', {id:item.id, isHistory: true,mode:trainPageRequest.typeCode,isBback:true})">
						<view class="white-bg" v-if="trainPageRequest.typeCode=='practise'">
							<text style="width: 150px;font-size: 15px;font-weight: bold;">{{item.practiceInfo}}</text>
							<view class="flex-jc-s-b" style="margin-top: 8px;">
								<text class="trainDate" style="width: 100px;">准确率:{{item.rightRate||0}}</text>
								<text class="trainDate" style="width: 100px;">用时:{{item.costTime}}</text>
								<text class="trainDate">日期:{{item.submitDate}}</text>
							</view>
						</view>
						<view v-if="trainPageRequest.typeCode=='test'">
							<!-- white-bg -->
							<view class="white-bg" style="font-size: 14px;margin-bottom: 8px;">
								<text style="font-weight: bold;" v-if="item.mark< 60">建筑学徒</text>
								<text style="font-weight: bold;" v-if="item.mark>= 60 && item.mark<80">预备梓人</text>
								<text style="font-weight: bold;" v-if="item.mark>= 80 && item.mark<90">能工巧匠</text>
								<text style="font-weight: bold;" v-if="item.mark>= 90">城市建造者</text>
							</view>
							<view class="flex-jc-s-b">
								<text style="white-space: nowrap;width:80px;font-weight: 500;"
									:class="item.mark>60?'sucessMark':'errorMark'">得分：{{item.mark||0}}分</text>
								<text class="trainDate" style="width:107px;"
									v-if="item.costTime">用时：{{item.costTime}}</text>
								<text class="trainDate" style="">日期:{{item.submitDate}}</text>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :fontSize='24' :nomoreText="statusData?'':''" :status="statusData" />
			</u-list>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref, defineExpose } from 'vue'
	import pageRoute from '../../utils/pageRoute'
	import { trainPage } from '@/api/tabBarPages/index.js'
	const tabList = ref([{
			label: '模拟考试',
			value: 'test',
		},
		{
			label: '自由练习',
			value: 'practise',
		},
	])
	// recodeIndex

	const recordData = ref([])
	const recodeIndex = ref(0)
	const statusData = ref('nomore')
	const trainPageRequest = reactive({
		"typeCode": "test",
		"pageDomain": {
			"pageNum": "1",
			"pageSize": "20",
			"orderByColumn": "",
			"isAsc": "",
			"reasonable": ""
		}
	})
	const sectionChange = (row, index) => {
		recordData.value = []
		recodeIndex.value = index
		trainPageRequest.typeCode = row.value
		initTrainPage()
	}
	const routePage = (id, path) => {
		uni.$u.route({
			url: path || 'pages/report/report',
			params: {
				id: id || '',
				mode: trainPageRequest.typeCode || ''
			}
		})
	}
	const scrolltolower = (el) => {
		statusData.value = 'loading'
		setTimeout(() => {
			if (el == undefined) { statusData.value = 'nomore' }
		}, 500)
	}
	const initTrainPage = () => {
		trainPage(trainPageRequest).then((res) => {
			recordData.value.push(...res.rows)
			statusData.value = ''
			recordData.value.map((item) => {
				if (item.submitDate) {
					item.submitDate = item.submitDate.split('-')[1] + '月' + item.submitDate.split('-')[
						2] + '日'
				}
			})
		})
	}
	const gotoPage = (url, params) => {
		pageRoute.route(url, params);
	}
  defineExpose({
    initData: initData()
  });
  function initData() {
    let token = uni.getStorageSync('token')
    if(token) {
      initTrainPage()
    }
  }

	onMounted(() => {
	})
</script>
<style lang="scss" scoped>
	.cell-theme-history {
		padding: 14px 15px;
		background-color: #fff;
		width: 92%;
		border-radius: 4px;
		margin-left: auto;
		margin-right: auto;
	}

	.tab-cell-content {
		// position: fixed;
		// left: 0;
		// top: 89px;
		background-color: #fff;
		width: 100%;
		// z-index: 1
	}

	.cell-text-active {
		font-weight: bold;
		color: #333333 !important;
	}

	.cell-title-active {
		// margin-top: 14px;
		background-color: #366DE8;
	}

	.cell-title-default {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 2px;
		margin: 0 49px;
		color: #999999
	}

	.trainDate {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #858B9B;
	}

	.sucessMark {
		font-size: 12px;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #366DE8;
	}

	.errorMark {
		@extend .sucessMark;
		color: #F56C6C;
	}
</style>
